<template>
  <div ref="root" class="webhome">
    <el-carousel height="40rem">
      <el-carousel-item v-for="item in banners" :key="item">
        <el-image style="width: 100%; height: 100%" :src="util_images_home_url(item)" fit="cover"></el-image>
      </el-carousel-item>
    </el-carousel>

    <!-- 产品展示 -->
    <div style="line-height: 100px; font-size: 30px">产品展示</div>
    <div class="anitest">
      <div class="food">速冻水果</div>
      <div class="food">速冻蔬菜</div>
      <div class="food">速冻油炸食品</div>
    </div>
    <div class="anitest_food">
      <food-show-cmp v-for="(item,index) in foods" :data="item" :key="index"></food-show-cmp>
    </div>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";

import FoodShowCmp from "./components/FoodShowCmp.vue";
export default {
  components: {
    FoodShowCmp,
  },
  setup() {
    const status = reactive({
      banners: ["banner1.png", "banner2.png"],
      foods: [
        {
          img: "food1.png",
          title: "袋装礼盒",
        },
        {
          img: "food2.png",
          title: "罐装礼盒",
        },
        {
          img: "food3.png",
          title: "红薯脆片",
        },
        {
          img: "food3.png",
          title: "红薯脆片",
        },
      ],
    });
    const root = ref(null);

    onMounted(() => {
      window.addEventListener("scroll", _on_page_scroll);
    });

    const _on_page_scroll = () => {
      const scrollY = window.scrollY;
      const anitest = document.querySelector(".anitest");
      const anitest_food = document.querySelector(".anitest_food");

      if (scrollY > 10) {
        anitest.style.transform = "translateY(1px)";
        anitest.style.opacity = "1";
      } else {
        anitest.style.transform = "translateY(-100px)";
        anitest.style.opacity = "0";
      }
      if (scrollY > 100) {
        anitest_food.style.transform = "translateY(1px)";
        anitest_food.style.opacity = "1";
      } else {
        anitest_food.style.transform = "translateY(-150px)";
        anitest_food.style.opacity = "0";
      }



    };


    const util_images_home_url = (name) => {
      return new URL(`../../assets/images/home/${name}`, import.meta.url).href;
    };

    return {
      ...toRefs(status),
      util_images_home_url,
      root,
    };
  },
};
</script>

<style lang="less" scoped>
.webhome {
  width: 100%;
  height: 70rem;
  background-color: var(--rf-primary-color);
  text-align: center;
}

.anitest {
  margin: 0 auto;
  height: 8rem;
  width: 20rem;
  opacity: 0;
  transform: translateY(-100px);
  transition: all 500ms linear;
  display: flex;
  justify-content: space-around;
  .food {
    width: 6rem;
    height: 6rem;
    border-radius: 3rem;
    background-color: #75BB41;
    line-height: 6rem;
  }
}

.anitest_food {
  width: 100%;
  display: flex;
  justify-content: center;
  transition: all 500ms linear;
  transform: translateY(-150px);

}
</style>
